<template>
  <div class="h-100 w-100 tsjcMap">
    <div class="left_panel">
      <div class="text-panel" style="height:calc(50%)">
        <el-row>
          <el-col :span="8">
            <div class="panel-title">
              <div class="text">
                <b></b>长度及高度监测
                <i></i>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div
              :class="table1.active==3?'buttonDiv  active':'buttonDiv'"
              @click="table1.active=3"
            >外坡比</div>
            <div
              :class="table1.active==2?'buttonDiv  active':'buttonDiv'"
              @click="table1.active=2"
            >坝体高度</div>
            <div
              :class="table1.active==1?'buttonDiv  active':'buttonDiv'"
              @click="table1.active=1"
            >干滩长度</div>
            
          </el-col>
        </el-row>
        <div class="panel-content">
          <el-table
            v-if="table1.active==1"
            class="mapTable"
            :data="table1.data"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column min-width="140" prop="name" label="矿山名称"></el-table-column>
            <el-table-column prop="city" label="所属省市"></el-table-column>
            <el-table-column prop="value" label="干滩长度监测值"></el-table-column>
          </el-table>
          <el-table
            v-if="table1.active==2"
            class="mapTable"
            :data="table1.data1"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column min-width="140" prop="name" label="矿山名称"></el-table-column>
            <el-table-column prop="city" label="所属省市"></el-table-column>
            <el-table-column prop="value" label="坝体高度监测值"></el-table-column>
          </el-table>
          <el-table
            v-if="table1.active==3"
            class="mapTable"
            :data="table1.data2"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column min-width="160" prop="name" label="矿山名称"></el-table-column>
            <el-table-column prop="city" label="所属省市"></el-table-column>
            <el-table-column prop="value" label="外坡比"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="text-panel" style="height:calc(50%)">
        <el-row>
          <el-col :span="12">
            <div class="panel-title">
              <div class="text">
                <b></b>水域、库区面积监测
                <i></i>
              </div>
            </div>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <div class="panel-content">
          <el-table
            class="mapTable"
            :data="table2.data"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column min-width="120" prop="name" label="矿山名称"></el-table-column>
            <el-table-column  prop="city" label="所属省市"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="mid_panel"></div>
    <div class="right_panel">
      <div class="text-panel" style="height:calc(60%)">
        <el-row>
          <el-col :span="12">
            <div class="panel-title">
              <div class="text">
                <b></b>头顶库监测
                <i></i>
              </div>
            </div>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <div class="panel-content">
          <el-table
            class="mapTable"
            :data="table3.data"
            :row-class-name="tableRowClassName"
            style="width: 100%"
          >
            <el-table-column min-width="120" prop="name" label="矿山名称"></el-table-column>
            <el-table-column prop="city" label="所属省市"></el-table-column>
            <el-table-column prop="is" label="是否头顶库"></el-table-column>
          </el-table>
        </div>
      </div>
      <div style="height:calc(40%);">
        <el-row class="full-h" :gutter="2">
          <el-col :span="10" class="full-h">
            <div class="echart-panel">
              <div class="panel-title">
                <b></b>尾矿库运行状态
                <i></i>
              </div>
              <div class="panel-content">
                <el-col :span="24" class="videoPanel">
                  <el-col :span="6" class="text-right">
                    <img src="../../public/images/video.png" alt />
                  </el-col>
                  <el-col :span="18" class="text-left">
                    <div class="text">在建(座)</div>
                    <div class="num">34</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="videoPanel">
                  <el-col :span="6" class="text-right">
                    <img src="../../public/images/video.png" alt />
                  </el-col>
                  <el-col :span="18" class="text-left">
                    <div class="text">在用(座)</div>
                    <div class="num">737</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="videoPanel">
                  <el-col :span="6" class="text-right">
                    <img src="../../public/images/video.png" alt />
                  </el-col>
                  <el-col :span="18" class="text-left">
                    <div class="text">停用(座)</div>
                    <div class="num">134</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="videoPanel">
                  <el-col :span="6" class="text-right">
                    <img src="../../public/images/video.png" alt />
                  </el-col>
                  <el-col :span="18" class="text-left">
                    <div class="text">已闭库(座)</div>
                    <div class="num">25</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="videoPanel">
                  <el-col :span="6" class="text-right">
                    <img src="../../public/images/video.png" alt />
                  </el-col>
                  <el-col :span="18" class="text-left">
                    <div class="text">在用(回采)(座)</div>
                    <div class="num">19</div>
                  </el-col>
                </el-col>
              </div>
            </div>
          </el-col>
          <el-col :span="14" class="full-h">
            <div class="echart-panel">
              <div class="panel-title">
                <b></b>尾矿库标准化等级统计情况
                <i></i>
              </div>
              <div class="panel-content">
                <div class="flyPanel">
                  <vae-echarts
                    height="calc(100% )"
                    style="height: calc(100%)"
                    :dispatchAction="pie.dispatchAction"
                    :options="pie.option"
                  ></vae-echarts>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
const pageName = "views_tsjc";

export default {
  name: pageName,
  data() {
    return {
      table1: {
        active: 1,
        data: [
          {
            name: "承德市双滦建龙矿业公司小东沟尾矿库",
            city: "河北承德",
            value: "393.91m"
          },
          {
            name: "韦岗铁矿毛竹湾尾矿库",
            city: "江苏镇江",
            value: "224.71m"
          },
          {
            name: "马钢集团控股有限公司姑山矿业公司青山尾矿库",
            city: "安徽马鞍山",
            value: "257.3m"
          },
          {
            name: "多金属尾矿库",
            city: "湖南省郴州市",
            value: "144m"
          },
          {
            name: "八家子磊子沟矿业尾矿库",
            city: "辽宁葫芦岛",
            value: "774.5m"
          }
        ],
        data1: [
          {
            name: "承德市双滦建龙矿业公司小东沟尾矿库",
            city: "河北承德",
            value: "118.4m"
          },
          {
            name: "韦岗铁矿毛竹湾尾矿库",
            city: "江苏镇江",
            value: "54.5m"
          },
          {
            name: "马钢集团控股有限公司姑山矿业公司青山尾矿库",
            city: "安徽马鞍山",
            value: "53.5m"
          },
          {
            name: "多金属尾矿库",
            city: "湖南省郴州市",
            value: "29.5m"
          },
          {
            name: "八家子磊子沟矿业尾矿库",
            city: "辽宁葫芦岛",
            value: "62m"
          }
        ],
        data2: [
          {
            name: "承德市双滦建龙矿业公司小东沟尾矿库",
            city: "河北承德",
            value: "1:1.25"
          },
          {
            name: "韦岗铁矿毛竹湾尾矿库",
            city: "江苏镇江",
            value: "1:2"
          },
          {
            name: "马钢集团控股有限公司姑山矿业公司青山尾矿库",
            city: "安徽马鞍山",
            value: " \\ "
          },
          {
            name: "多金属尾矿库",
            city: "湖南省郴州市",
            value: " \\ "
          },
          {
            name: "八家子磊子沟矿业尾矿库",
            city: "辽宁葫芦岛",
            value: "1:2.75"
          }
        ]
      },
      table2: {
        data: [
          {
            name: "承德市双滦建龙矿业公司小东沟尾矿库",
            city: "河北承德",
            status: "正常"
          },
          {
            name: "韦岗铁矿毛竹湾尾矿库",
            city: "江苏镇江",
            status: "正常"
          },
          {
            name: "马钢集团控股有限公司姑山矿业公司青山尾矿库",
            city: "安徽马鞍山",
            status: "正常"
          },
          {
            name: "多金属尾矿库",
            city: "湖南省郴州市",
            status: "正常"
          },
          {
            name: "八家子磊子沟矿业尾矿库",
            city: "辽宁葫芦岛",
            status: "正常"
          }
        ]
      },
      table3: {
        data: [
          {
            name: "承德市双滦建龙矿业公司小东沟尾矿库",
            city: "河北承德",
            is: "是"
          },
          {
            name: "韦岗铁矿毛竹湾尾矿库",
            city: "江苏镇江",
            is: "是"
          },
          {
            name: "马钢集团控股有限公司姑山矿业公司青山尾矿库",
            city: "安徽马鞍山",
            is: "是"
          },
          {
            name: "多金属尾矿库",
            city: "湖南省郴州市",
            is: "是"
          },
          {
            name: "八家子磊子沟矿业尾矿库",
            city: "辽宁葫芦岛",
            is: "否"
          }
        ]
      },
      rightPie1: {},
      pie: {
        id: "mkzhfxfx",
        dispatchAction: {
          show: true,
          dataIndex: 0
        },
        dataIndex: 0,
        option: {}
      }
    };
  },

  methods: {
    initTable1() {
      // this.request({
      //   url: "data/getData/2.1",
      //   method: "get"
      // }).then(({data})=> {
      //    this.table1.data=data;
      // })
    },
    initTable2() {
      // this.request({
      //   url: "data/getData/2.2",
      //   method: "get"
      // }).then(({ data }) => {
      //   this.table2.data = data;
      // });
    },
    initTable3() {
      // this.request({
      //   url: "data/getData/2.3",
      //   method: "get"
      // }).then(({ data }) => {
      //   this.table3.data = data;
      // });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "tableBg";
      } else {
        return "";
      }
    },
    //加载煤矿灾害风险分析
    initPie() {
      let data = {
        nameIdMap: {
          历史事故: "cc390be0_c9e3_4382_8da5_9130c0aa6e33",
          固有风险: "a11a42fc_3eed_49e0_b89a_b320c2400b56",
          水害风险: "f50ec77a_29df_4b2e_a5fe_a8554a72a21d",
          安全管理: "cae97a68_6e0c_44ef_8592_ce1bdd8a8adb",
          人员安全: "22bab355_4170_4088_a7bf_38c6ba64a638",
          设备安全: "c8549f19_6978_4939_b066_9bd137a0b297",
          瓦斯灾害: "e42b77d4_7110_4eb4_aec5_e598f7cf84b8",
          冲击地压: "c3260384_aa56_4713_937f_3b5091d2a791",
          火灾风险: "6ffdfdbd_4ed8_445b_a2c7_846e556a6f2d"
        },
        dataListMap: [
          {
            value: 32,
            name: "一级"
          },
          {
            value: 339,
            name: "二级"
          },
          {
            value: 260,
            name: "三级"
          },
          {
            value: 308,
            name: "其他"
          }
        ],
        maxData: {
          norm_id: "cc390be0_c9e3_4382_8da5_9130c0aa6e33",
          norm_name: "516",
          weight_score: 86.8,
          mine_norm_id: "4c90280a_4cb5_4e3d_867a_4c95fc38c7ce"
        }
      };
      this.pie.option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} <br/> {d}%"
        },
        color: [
          "#29d0b6",
          "#cfcfd0",
          "#82d086",
          "#cdcf72",
          "#019cff",
          "#49dcfd",
          "#6caaff",
          "#eaab68",
          "#29d0b6",
          "#29d0b6"
        ],
        series: [
          {
            type: "pie",
            radius: ["53%", "65%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                lineHeight: 16,
                formatter: "{b}\n{d}%",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: true
            },
            data: data.dataListMap
          }
          // {
          //     hoverAnimation: false,
          //     type: 'pie',
          //     z: 2,
          //     data: [],
          //     radius: ['52%', '59%'],
          //     zlevel: -2,
          //     itemStyle: {
          //         normal: {
          //             borderColor: '#1f1e26',
          //             borderWidth: 4,
          //         }
          //     },
          //     label: {
          //         normal: {
          //             position: 'inside',
          //             show: false,
          //         }
          //     },
          // },
        ]
      };
      this.pie.dispatchAction.show = true;
    }
  },
  created() {
    this.initPie();
    this.initTable1();
    this.initTable2();
    this.initTable3();
  }
};
</script>
<style lang="less">
.full-h {
  height: 100%;
}
.full-w {
  width: 100%;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.tsjcMap {
  .text-panel {
    height: 70%;
    background-size: contain !important;
    .buttonDiv {
      width: 4vw;
      height: 2.4vh;
      font-size:1.4vh;
      background: url("../../public/images/Tai_di.png") no-repeat;
      background-size: 100% 100%;
      color: #23edff;
      text-align: center;
      float: right;
      line-height: 2.4vh;
      margin-top:0.3vh;
      margin-left: 0.4vw;
      cursor: pointer;
    }
    .buttonDiv.active {
      background: url("../../public/images/Tai_dian.png") no-repeat;
      background-size: 100% 100%;
    }
    .panel-title {
      background: url("../../public/images/Tai_icon.png") no-repeat;
      background-size: initial;
      padding-left: 1.6vw;
      margin: 0.5vh 0;
      background-position-y: 0.2vh;
      .text {
        color: #1fdffe;
        font-size: 1.4vh;
        line-height: 2vh;
      }
    }
    .panel-content {
      .mapTable {
        background: #091c68;
        color: #fff;
        th {
          border-bottom: 0;
          background: transparent;
          .cell {
            color: #fff;
          }
        }

        tr {
          background: transparent;
          td {
            border-bottom: 1px solid transparent;
            padding: 0.8vh 0;
          }
        }
        tr.tableBg {
          background: #030e51;
        }
        tr:hover {
          background: url("../../public/images/Tai_tiao.png") no-repeat;
          background-size: 100% 100%;
          td {
            background: transparent;
          }
        }
      }
      .el-table::before {
        background: transparent;
      }
    }
  }

  .left_panel {
    background: url("../../public/images/panel_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 2vh;
    box-sizing: border-box;
  }
  .right_panel {
    background: url("../../public/images/panel_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    background-size: 100% 100%;
    padding: 2vh !important;
    padding-top: 5vh !important;
    box-sizing: border-box;
    .echart-panel {
      height: calc(95%);
      padding: 0.5vh;
      background: url("../../public/images/bj1.png") no-repeat;
      background-size: 100% 100% !important;
      box-sizing: border-box;
      .panel-title {
        font-size: 1.6vh;
        line-height: 2vh;
        color: #fff;
        b {
          display: inline-block;
          width: 2vh;
          height: 2vh;
          background: url("../../public/images/zuo.png") no-repeat;
          background-size: contain;
          vertical-align: middle;
        }
        i {
          display: inline-block;
          width: 2vh;
          height: 2vh;
          background: url("../../public/images/you.png") no-repeat;
          background-size: contain;
          vertical-align: middle;
        }
      }
      .panel-content {
        height: calc(100% - 2vh);
        margin-top: 2vh;
        .videoPanel {
          margin-bottom: 0.5vh;
          img {
            width: 90%;
          }
          .text {
            color: #fff;
            font-size: 1.2vh;
            padding-bottom: 0.5vh;
            padding-top: 0.5vh;
            padding-left: 0.5vw;
          }
          .num {
            color: #40e6fe;
            font-size: 1.6vh;
            font-family: "黑体";
            padding-left: 0.5vw;
          }
        }
      }
    }
  }
  .flyPanel {
    width: 80%;
    height: 80%;
    background: url("../../public/images/bing.png") no-repeat;
    background-size: contain;
    background-position-y: 3vh;
    margin: 0 auto;
  }
}
</style>
